import { LitElement, html, css } from 'lit';
import 'card-ui';
import { stylesString } from './styles.js';

export class KpWemeet extends LitElement {
  static styles = [
    css([stylesString])
  ];

  static properties = {
    preview: { type: Boolean },
    title: { type: String },
    url: { type: String },
    extra: { type: Object },
  }

  constructor() {
    super();
    this.preview = false;
    this.title = '';
    this.url = '';
    this.extra = null;
  }

  linkElement(content) {
    return this.preview ? content : html`<kpc-link href="${this.url}">${content}</kpc-link>`;
  }

  formatDate(val) {
    const date = new Date(val * 1000);
    return `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`;
  }

  formatDatetime(val) {
    const date = new Date(val * 1000);
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
  }

  render() {
    const { type, code, beginTime, endTime } = this.extra;

    const date = type === 'dm' ? html`
      <section class="row meeting-time">
        <dl>
          <dt><strong class="time">${this.formatDatetime(beginTime)}</strong></dt>
          <dd><span class="date">${this.formatDate(beginTime)}</span></dd>
        </dl>
        <span style="background: #ccc; height: 1px; flex: 1; margin: 0 24px"></span>
        <dl>
          <dt><strong class="time">${this.formatDatetime(endTime)}</strong></dt>
          <dd><span class="date">${this.formatDate(endTime)}</span></dd>
        </dl>
      </section>
    ` : null;
    const link = `wemeet://page/inmeeting?meeting_code=${code}`;

    return html`
      <div class="root">
        <div class="title-wrap">
          ${this.linkElement(html`<kpc-typography variant="title" class="title">${this.title}</kpc-typography>`, this.url)}
        </div>
        <section class="row">
          <kpc-typography variant="body1">会议号</kpc-typography>
          <kpc-typography variant="body1" class="code">${code}</kpc-typography>
        </section>
        ${date}
        <section style="margin-top: 48px"><a class="join" href=${link}>加入会议</a></section>
      </div>
    `;
  }
}

window.customElements.define('TAG_NAME', KpWemeet);
